<script setup lang="ts">
  import {
    getMemberAddressByIdAPI,
    postMemberAddressAPI,
    putMemberAddressByIdAPI,
  } from '@/api/address'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  // 表单数据
  const form = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
  })

  // 获取页面参数
  const query = defineProps<{
    id?: string
    type?: number
  }>()

  // 获取收货地址详情数据
  const getMemberAddressByIdData = async () => {
    if (query.id) {
      // 发送请求
      const res = await getMemberAddressByIdAPI(query.id)
      // 把数据合并到表单中
      Object.assign(form.value, res.data)
      console.log('已经传过来了', query.id)
      console.log('form.value', form.value)
    }
  }
  function handleBack() {
    uni.navigateBack({})
  }

  function handleBackHome() {
    uni.reLaunch({ url: '/pages/home/index' })
  }

  // 页面加载
  onLoad((option) => {
    console.log('option', option)
    getMemberAddressByIdData()
  })

  // 动态设置标题
  uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

  // 收集所在地区
  const onRegionChange: UniHelper.RegionPickerOnChange = (ev) => {
    // 省市区(前端展示)
    form.value.fullLocation = ev.detail.value.join(' ')
    // 省市区(后端参数)
    const [provinceCode, cityCode, countyCode] = ev.detail.code!
    // form.value.provinceCode = provinceCode
    Object.assign(form.value, { provinceCode, cityCode, countyCode })
  }

  // 收集是否默认收货地址
  const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
    form.value.isDefault = ev.detail.value ? 1 : 0
  }

  // 定义校验规则
  const rules: UniHelper.UniFormsRules = {
    receiver: {
      rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
    },
    contact: {
      rules: [
        { required: true, errorMessage: '请输入联系方式' },
        { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
      ],
    },
    countyCode: {
      rules: [{ required: true, errorMessage: '请选择所在地区' }],
    },
    address: {
      rules: [{ required: true, errorMessage: '请选择详细地址' }],
    },
  }

  // 表单组件实例
  const formRef = ref<UniHelper.UniFormsInstance>()

  // 提交表单
  const onSubmit = async () => {
    try {
      // 表单校验
      await formRef.value?.validate?.()
      // 校验通过后再发送请求
      if (query.id) {
        // 修改地址请求
        await putMemberAddressByIdAPI(query.id, form.value)
      } else {
        // 新建地址请求
        await postMemberAddressAPI(form.value)
      }
      // 成功提示
      uni.showToast({
        icon: 'success',
        title: query.id ? '修改成功' : '添加成功',
      })
      // 通知列表页面刷新
      uni.$emit('address-updated')
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 400)
    } catch (error) {
      uni.showToast({ icon: 'error', title: '请填写完整信息' })
    }
  }

  // #ifdef H5 || APP-PLUS
  const onCityChange: UniHelper.UniDataPickerOnChange = (ev) => {
    // 省市区
    const [province, city, county] = ev.detail.value
    // 收集后端所需的 code 数据
    Object.assign(form.value, {
      provinceCode: province.value,
      cityCode: city.value,
      countyCode: county.value,
    })
  }
  // #endif
</script>

<template>
  <view class="viewpot">
    <wd-navbar title="标题" fixed safeAreaInsetTop left-text="返回" placeholder left-arrow>
      <template #capsule>
        <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
      </template>
    </wd-navbar>
    <view class="content">
      <uni-forms :rules="rules" :model="form" ref="formRef">
        <!-- 表单内容 -->
        <uni-forms-item name="receiver" class="form-item">
          <text class="label">收货人</text>
          <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
        </uni-forms-item>
        <uni-forms-item name="contact" class="form-item">
          <text class="label">手机号码</text>
          <input
            class="input"
            placeholder="请填写收货人手机号码"
            :maxlength="11"
            v-model="form.contact"
          />
        </uni-forms-item>
        <uni-forms-item name="countyCode" class="form-item">
          <text class="label">所在地区</text>
          <!-- #ifdef MP-WEIXIN -->
          <picker
            @change="onRegionChange"
            class="picker"
            mode="region"
            :value="form.fullLocation.split(' ')"
          >
            <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
            <view v-else class="placeholder">请选择省/市/区(县)</view>
          </picker>
          <!-- #endif -->

          <!-- #ifdef H5 || APP-PLUS -->
          <uni-data-picker
            placeholder="请选择地址"
            popup-title="请选择城市"
            collection="opendb-city-china"
            field="code as value, name as text"
            orderby="value asc"
            :step-searh="true"
            self-field="code"
            parent-field="parent_code"
            @change="onCityChange"
            :clear-icon="false"
            v-model="form.countyCode"
          />
          <!-- #endif -->
        </uni-forms-item>
        <uni-forms-item name="address" class="form-item">
          <text class="label">详细地址</text>
          <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
        </uni-forms-item>
        <view class="form-item">
          <label class="label">设为默认地址</label>
          <switch
            @change="onSwitchChange"
            class="switch"
            color="#89c4ae"
            :checked="form.isDefault === 1"
          />
        </view>
      </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button @tap="onSubmit" class="button">保存并使用</button>
  </view>
</template>

<style lang="scss">
  // 深度选择器修改 uni-data-picker 组件样式
  :deep(.selected-area) {
    flex: 0 1 auto;
    height: auto;
  }

  page {
    background-color: #f4f4f4;
  }

  .content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item,
    .uni-forms-item {
      display: flex;
      align-items: center;
      min-height: 96rpx;
      padding: 25rpx 10rpx;
      background-color: #fff;
      font-size: 28rpx;
      border-bottom: 1rpx solid #ddd;
      position: relative;
      margin-bottom: 0;

      // 调整 uni-forms 样式
      .uni-forms-item__content {
        display: flex;
      }

      .uni-forms-item__error {
        margin-left: 200rpx;
      }

      &:last-child {
        border: none;
      }

      .label {
        width: 200rpx;
        color: #333;
      }

      .input {
        flex: 1;
        display: block;
        height: 46rpx;
      }

      .switch {
        position: absolute;
        right: -20rpx;
        transform: scale(0.8);
      }

      .picker {
        flex: 1;
      }

      .placeholder {
        color: #808080;
      }
    }
  }

  .button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
</style>
